<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/editor/css/editormd.css}"/>
    <link rel="stylesheet" th:href="@{/lib/editor/css/editormd.css}"/>
    <style type="text/css">
        .layui-this .layui-form-checked[lay-skin=primary] i{
            border: 1px solid #fff;
            font-weight: bold;
        }
        .layui-this .layui-form-checkbox[lay-skin=primary] span{
            color: #fff;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="layout">
            <form id="form-search" class="layui-form layui-form-pane" action="">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md8">
                        <div class="grid-demo grid-demo-bg1">
                            <div id="md-content" style="margin-top: 10px">
                                <textarea lay-verify="content" name="content" style="display:none"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4" style="margin-top: 10px">
                        <div class="layui-card">
                            <div class="layui-card-header">撰写博客</div>
                            <div class="layui-card-body">
                                <div style="margin: 2px 10px 10px 10px">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">文章标题</label>
                                            <div class="layui-input-inline">
                                                <input style="border-radius: 5px;" type="text" id="title" name="articleTitle" lay-verify="title" placeholder="请输入标题" autocomplete="off" class="layui-input" value="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">文章标签</label>
                                        <select name="colId" lay-search="" multiple="multiple">
                                            <option value="">请选择标签</option>
                                            <option th:each="tags:${tag}" th:text="${tags.tagName}" th:value="${tags.id}">请选择类型</option>
                                        </select>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">文章分类</label>
                                        <div class="layui-input-inline" >
                                            <select name="colId" lay-search="">
                                                <option value="">请选择分类</option>
                                                <option th:each="cat:${list}" th:text="${cat.categoryName}" th:value="${cat.id}">请选择类型</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">文章类型</label>
                                        <div class="layui-input-inline">
                                            <select name="type" lay-verify="type"  lay-search="">
                                                <option value="">请选择类型</option>
                                                <option value="1">原创</option>
                                                <option value="2">转载</option>
                                                <option value="3">翻译</option>
                                            </select>
                                        </div>
                                    </div>
                                    <label class="layui-form-label">上传封面</label>
                                    <div class="layui-upload-drag" id="imp">
                                        <input type="hidden" name="image" id="image">
                                        <i class="layui-icon"></i>
                                        <p>点击上传，或将文件拖拽到此处</p>
                                        <div class="layui-hide" id="upload">
                                            <hr>
                                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                        </div>
                                    </div>
                                    <div class="layui-form-item" style="margin-top: 20px">
                                        <label class="layui-form-label">置顶</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" name="isTop" id="isTop" lay-filter="isTop" lay-skin="switch" lay-text="ON|OFF">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">推荐</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" name="isHot" id="isHot" lay-skin="switch" lay-text="ON|OFF">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <button style="border-radius: 30px;margin-left: 10px" class="layui-btn layui-btn-primary layui-border-red" lay-submit lay-filter="keep">保存草稿</button>
                                            <button style="border-radius: 30px" type="button" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">发布文章</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
<script th:src="@{/lib/editor/editormd.js}"></script>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script type="text/javascript">
    layui.extend({
        //路径指向本js文件即可
        multiSelect: '../../static/js/multiple'
    }).use(['form','layer','upload','multiSelect'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            multiSelect = layui.multiSelect;

        multiple.render();
        var testEditor;

        $(function () {
            testEditor = editormd("md-content", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "/lib/editor/lib/",
                toolbarIcons: ["undo", "redo", "|", "bold", "del", "italic", "quote", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|", "link", "image", "code", "code-block",
                    "table", "emoji", "search", "|", "watch", "preview"],
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/admin/upload",
                toolbarAutoFixed: false,
            });

        });
        form.verify({
            title: function (value) {
                if (value.length == 0) {
                    return '文章标题不能为空'
                }
            },
            type: function (value) {
                if (value == ''){
                    return '请选择文章类型'
                }
            },
            content: function (value) {
                if (value.length == 0){
                    return '文章内容不能为空'
                }
            }
        })

        //拖拽上传
        upload.render({
            elem: '#imp'
            ,url: '/admin/upload/cover' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layer.msg('上传成功');
                layui.$('#upload').removeClass('layui-hide').find('img').attr('src', res.data.src);
                document.getElementById('image').value=res.data.src;
            }
        });

        form.on('submit(*)', function (data) {
            // var arr = new Array();
            // $("input:checkbox[name='tags']:checked").each(function(i){
            //     arr[i] = $(this).val();
            // });
            // data.field.tags = arr.join(",");//将数组合并成字符串
            console.log(data.field)
            if(data.field.isTop == "on") {
                data.field.isTop = "1";
            } else {
                data.field.isTop = "0";
            }
            if(data.field.isHot == "on") {
                data.field.isHot = "1";
            } else {
                data.field.isHot = "0";
            }
            var url = '/admin/addArticle'
            data = data.field;
            art = {
                articleTitle : data.articleTitle,
                articleCover : data.image,
                articleContent : data.content,
                categoryId : data.colId,
                tag : data.tags,
                type : data.type,
                isTop : data.isTop,
                isHot : data.isHot
            }
            $.post("/admin/addArticle", art, function (response) {
                if (response.code == 0) {
                    // 成功提示
                    layer.msg(response.message, {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                } else {
                    // 失败则提示错误信息，窗口不关闭
                    layer.msg("新增失败，请联系管理员", {
                        icon: 2,
                        anim: 6
                    });
                }
            });
        })
    });
</script>
</body>
</html>